<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="checkedall" value="全选/全不选">全选/全不选
    <br>
    <input type="checkbox" name="items">篮球
    <input type="checkbox" name="items">足球
    <input type="checkbox" name="items">排球
    <input type="checkbox" name="items">乒乓球
    <br>
    <input type="button" id="quanxuan" value="全选">
    <input type="button" id="quanbuxuan" value="全不选">
    <input type="button" id="fanxuan" value="反选">

<script>
    var items = document.getElementsByName("items");
    var quanxuan = document.getElementById("quanxuan");
    var quanbuxuan = document.getElementById("quanbuxuan");
    var checkedall = document.getElementById("checkedall");
    var fanxuan = document.getElementById("fanxuan");

    //当点击全选按钮时，所有的选项都会选中
    quanxuan.onclick = function(){
        for(var i = 0;i < items.length;i++){
            items[i].checked = true;
        }
        checkedall.checked = true;
    }

    //当点击全不选按钮时，全部选项都不会被选中
    quanbuxuan.onclick = function(){
        for(var i = 0;i < items.length;i++){
            items[i].checked = false;
        }
        checkedall.checked = false;
    }

    //当点击反选按钮时，所有的选项结果都会反转
    fanxuan.onclick = function(){
        for(var i = 0;i < items.length;i++){
            if(items[i].checked){
                items[i].checked = false;
            }else{
                items[i].checked = true;
            }
            
        }
    }

    //当点击“全选/全不选”框时，所有的选项都会相应的全选或者全不选
    checkedall.onclick = function(){
        for(var i = 0;i < items.length;i++){
            items[i].checked = this.checked;
        }
    }

    //当所有选择框都选中时，全选/全不选 框会被选中
    for(var i = 0;i < items.length;i++){
        items[i].onclick = function(){

            checkedall.checked = true;
            for(var i = 0;i < items.length;i++){
                if(!items[i].checked){
                    checkedall.checked = false;
                    break;
                }
            }
        }
    }
</script>
</body>
</html>